{extend name="base" /}
{block name="title"}
<title>添加用户</title>
{/block}
{block name="content"}

<fieldset class="layui-elem-field layui-field-title">
    <legend>
        <span class="layui-breadcrumb">
            <a href="{:url('admin/user/index')}">用户管理</a>
            <a><cite>添加</cite></a>
        </span>
    </legend>
    <br>
    <a href="{:url('admin/user/add')}" class="layui-btn">添加用户</a>
    <a href="{:url('admin/user/index')}" class="layui-btn layui-btn-normal" target="">用户列表</a>
</fieldset>
<!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>方框风格的表单集合</legend>
</fieldset>-->

<form class="layui-form layui-form-pane" action="" method="post">
    <table class="layui-table">
        <colayui-inputroup>
            <col width="10%">
            <col width="80%">
        </colayui-inputroup>
        <thead>
        <tr>
            <th class="tc">名称</th>
            <th class="tc">值</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="tc" width="10px"><i class="require">*</i>用户图上传：</td>
            <td height="100px">
                <div class="site-demo-upload">
                    <img id="img_url_img" src="" width="255" height="170" alt="图片预览">
                    <input id="img_url" class="layui-input" lay-verify="require" type="hidden" name="img_url" value="">
                </div>
                <button type="button" class="layui-btn" id="test1">上传图片</button>
            </td>
        </tr>
        <tr>
            <th><i class="require">*</i>用户图链接地址：</th>
            <td>
                <div style="float:left; width: 30%">
                    <input type="text" class="layui-input" lay-verify="required" name="href" placeholder="如：www.baidu.com" value="">
                </div>
                <div style="float: left;"> &nbsp;&nbsp;</div>
            </td>
        </tr>

        <tr>
            <th><i class="require"></i>用户描述：</th>
            <td>
                <input type="text" class="layui-input" lay-verify="" name="tips" placeholder="这里输入描述" value="">
                <span></span>
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <div class="layui-form-item">
                    <button class="layui-btn" lay-submit="" lay-filter="sub">立即提交</button>
                </div>
            </td>
        </tr>

        </tbody>
    </table>
</form>
{/block}

{block name="js"}
<script type="text/javascript">
    layui.use(['form', 'layedit', 'laydate','element','upload','layer'], function () {
        var $ = layui.jquery, form = layui.form, layer = layui.layer, layedit = layui.layedit, upload = layui.upload
            ,laydate = layui.laydate, element = layui.element;

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            require: function (value) {
                if (value.length < 1){
                    return '必填项内容不能为空';
                }
            }
            ,name: function (value) {
                if (value.length < 2) {
                    return '标题至少得2个字符啊';
                }
            }
            , pass: [/(.+){6,12}$/, '密码必须6到12位']
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(sub)', function (data) {
            /*layer.alert(JSON.stringify(data.field), {
             title: '最终的提交信息'
             });*/
            return true;
        });

        // you code ...
        //拖拽上传
        upload.render({
            elem: '#test1'
            ,url: '{:url("/admin/common/upload/type/user")}'
            ,done: function(datap){
                //console.log(datap);//var datap = JSON.parse(data); //$.parseJSON(data);
                layer.msg(datap.msg);
                if(datap.errno == 0) {
                    $("input[name='img_url']").val(datap.path);
                    $('#img_url_img').attr('src', datap.path);
                }
            }
        });
    });
</script>
{/block}